<template>
  <div class="rightArrow">
    第一种 使用 “ & g t ” &gt;
    <div>
      第二种，利用CSS实现 兼容IE8
      <div class="gtDesign"></div>
    </div>
    <p>第三种，使用 transform 不兼容IE8 的做法</p>
    <div class="usetransform"></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.rightArrow {
  border: 1px solid #000;
  margin-right: 100px;
  padding: 20px;
}
.gtDesign {
  width: 100px;
  height: 100px;
  background-color: #fff;
  position: relative;
}
.gtDesign:before,
.gtDesign:after {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%; /*相当于left:100px;（因为div宽度为100px）*/
  position: absolute;
  width: 0;
}
.gtDesign:before {
  border-width: 12px;
  border-left-color: #000;
  top: 18px;
}
.gtDesign:after {
  border-width: 10px;
  border-left-color: #fff;
  top: 20px;
}
.usetransform {
  margin-top: 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-top-color: #000;
  border-right-color: #000;
  transform: rotate(45deg);
}
</style>
